/*
 * @Author: C.
 * @Date: 2024-04-19 10:47:18
 */
import { listBook } from '@/api/book';
import { listLesson } from '@/api/lesson';
import { Tabs, PullRefresh, List, Cell, ProductCard, Image } from 'react-vant';
import { useNavigate } from 'react-router-dom';
export default function Home() {
  // 编程式路由
  const navigate = useNavigate();
  const [books, setBooks] = useState<Recordable[]>([]);
  const [finished, setFinished] = useState<boolean>(false);
  const [lessons, setLessons] = useState<Recordable[]>([]);
  const [bookId, setBookId] = useState('');

  async function fetchBookList() {
    const data: Recordable = await listBook({ pageNum: 1, pageSize: 99 });
    setBookId;
    data.rows[1].id;
    setBooks(data.rows);
  }
  async function fetchLseesonList(bookId: string) {
    const data: Recordable = await listLesson({ pageNum: 1, pageSize: 99, bookId });
    setLessons(data.rows);
  }
  function toSentenceList(lesson: Recordable) {
    navigate('/practice', {
      state: {
        lessonId: lesson.id,
        lessonName: lesson.name,
      },
    });
  }
  useEffect(() => {
    fetchBookList();
  }, []);
  useEffect(() => {
    fetchLseesonList(bookId);
  }, [bookId]);
  return (
    <>
      <Tabs border type="jumbo" active={bookId} onClickTab={params => setBookId(params.name)}>
        {books.map(item => (
          <Tabs.TabPane
            key={item.id}
            title={item.name}
            name={item.id}
            description={item.description}
          >
            {lessons.map((lItem, idx) => (
              <Cell
                center
                key={lItem.id}
                title={lItem.name}
                label={lItem.description}
                icon={
                  <Image width={44} height={44} src="https://img.yzcdn.cn/vant/ipad.jpeg" round />
                }
                isLink
                onClick={() => toSentenceList(lItem)}
              />
            ))}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </>
  );
}
